<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="true"
    class="open-invoice-common-dialog small-common-dialog-size"
    width="450px">
    <div class="main">
      <Title title="新增备注" font-size="16px" class="mb16"/>
      <el-form
        ref="remarkForm"
        :model="formData"
        :rules="rules"
        label-position="right"
        label-width="80px"
        class="setting-form">
        <el-form-item label="备注" prop="remark" style="margin-bottom: 10px;">
          <el-input
            :rows="4"
            :maxlength="500"
            v-model="formData.remark"
            placeholder="请输入备注"
            resize="none"
            style="font-size: 13px;"
            type="textarea" />
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-container">
      <el-button :loading="loading" type="primary" size="small" @click="handelSave">保存</el-button>
      <el-button class="cancel-btn-style" type="info" size="small" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import { addClientRemark } from '@/api/customer';
import ElMessage from '@/utils/message';

export default {
  components: { Title },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      formData: {
        id: '',
        remark: ''
      },
      rules: {
        remark: [{ required: true, trigger: 'blur', message: '请输入备注' }]
      }
    };
  },
  methods: {
    handleOpen(id) {
      this.formData.id = id;
      this.dialogVisible = true;
    },
    handelSave() {
      this.$refs.remarkForm.validate((valid) => {
        if (valid) {
          addClientRemark(this.formData).then(res => {
            if (res.code === 200) {
              ElMessage.success('操作成功！');
              this.$emit('updateDetail');
              this.handleClose();
            }
          }).catch(err => {
            console.log(err);
          });
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.$refs.remarkForm.resetFields();
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.mb16 {
  margin-bottom: 16px;
}
.btn-container {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
</style>
